<template>
    <div ref="canvas" style="">

    </div>
    <button @click="xr"> 渲染</button>
</template>
<script setup>
import * as THREE from 'three';
// 引入控制 
import { DragControls } from 'three/addons/controls/DragControls.js';
let scene, camera, controls, renderer;

let axesHelper;
// 预计 需要将我们的物体 渲染到 哪个div里面
const canvas = ref(null)
onMounted(() => {
    // 设置加载管理器
    const event = {};
    event.onLoad = () => {

        render(); //当材质图片加载完成，重新渲染一下

    };



    renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器对象
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(600,500); //设置渲染区域尺寸

    canvas.value.appendChild(renderer.domElement); //body元素中插入canvas对象


    scene = new THREE.Scene();
    scene.background = new THREE.Color("#4440");
    camera = new THREE.PerspectiveCamera(
        15,
        600 /500,
        0.01,
        300
    );
    camera.position.set(0, 0, 230);

    // controls = new OrbitControls(camera, renderer.domElement);
    // controls.addEventListener('change', render); //监听鼠标、键盘事件

    // 环境光
    const ambient = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambient);
    /**
     * 
    radius — 球体半径，默认为1。
    widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为32。
    heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为16。
    phiStart — 指定水平（经线）起始角度，默认值为0。。
    phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
    thetaStart — 指定垂直（纬线）起始角度，默认值为0。
    thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
     */
    // 几何体 
    const ball = new THREE.PlaneGeometry(10, 10)//SphereGeometry(6, 64, 32, 0, Math.PI * 2, 0, Math.PI); //球一面

    // 材质
    const texture = new THREE.TextureLoader();
    // 加载图片
    const frontTexture = texture.load('/static/1.png', event.onLoad);
    const frontTexture1 = texture.load('/static/2.png', event.onLoad);
    const frontTexture2 = texture.load('/static/3.png', event.onLoad);
    const frontTexture3 = texture.load('/static/4.png', event.onLoad);
    const frontTexture4 = texture.load('/static/5.png', event.onLoad);
    const frontTexture5 = texture.load('/static/6.png', event.onLoad);
    const frontTexture6 = texture.load('/static/7.png', event.onLoad);
    const frontTexture7 = texture.load('/static/8.png', event.onLoad);
    const frontTexture_c = texture.load('/static/1_c.png', event.onLoad);
    const frontTexture1_c = texture.load('/static/2_c.png', event.onLoad);
    const frontTexture2_c = texture.load('/static/3_c.png', event.onLoad);
    const frontTexture3_c = texture.load('/static/4_c.png', event.onLoad);
    const frontTexture4_c = texture.load('/static/5_c.png', event.onLoad);
    const frontTexture5_c = texture.load('/static/6_c.png', event.onLoad);
    const frontTexture6_c = texture.load('/static/7_c.png', event.onLoad);
    const frontTexture7_c = texture.load('/static/8_c.png', event.onLoad);


    // 定义材质常量，如果你想单独修改某个材质，请重新创建，否则修改了下面的某一个，其它运用到这个材质的地方也会变噢
    const front_material = new THREE.MeshBasicMaterial({
        // color: 0xffff00,
        map: frontTexture,
        transparent: true
    });



    // 球
    const mesh_ball = new THREE.Mesh(ball, front_material);
    // 设置初始位置
    mesh_ball.position.set(0, 15, -30);



    const ball1 = new THREE.PlaneGeometry(10, 10)//SphereGeometry(6, 64, 32, 0, Math.PI * 2, 0, Math.PI); //球一面

    // 材质
    const texture1 = new THREE.TextureLoader();
    // 加载图片
    // const frontTexture1 = texture.load('/static/1.png', event.onLoad);


    // 定义材质常量，如果你想单独修改某个材质，请重新创建，否则修改了下面的某一个，其它运用到这个材质的地方也会变噢
    const front_material1 = new THREE.MeshBasicMaterial({

        map: frontTexture1,
        // alphaMap: frontTexture1,
        // 设置透明属性
        transparent: true
        // opacity:0.5,
        // side: THREE.FrontSide
    });
    const front_material2 = new THREE.MeshBasicMaterial({

        map: frontTexture2,
        // alphaMap: frontTexture1,
        // 设置透明属性
        transparent: true
        // opacity:0.5,
        // side: THREE.FrontSide
    });
    const front_material3 = new THREE.MeshBasicMaterial({

        map: frontTexture3,
        // alphaMap: frontTexture1,
        // 设置透明属性
        transparent: true
        // opacity:0.5,
        // side: THREE.FrontSide
    });
    const front_material4 = new THREE.MeshBasicMaterial({

        map: frontTexture4,
        // alphaMap: frontTexture1,
        // 设置透明属性
        transparent: true
        // opacity:0.5,
        // side: THREE.FrontSide
    });
    const front_material5 = new THREE.MeshBasicMaterial({

        map: frontTexture5,
        // alphaMap: frontTexture1,
        // 设置透明属性
        transparent: true
        // opacity:0.5,
        // side: THREE.FrontSide
    });
    const front_material6 = new THREE.MeshBasicMaterial({

        map: frontTexture6,
        // alphaMap: frontTexture1,
        // 设置透明属性
        transparent: true
        // opacity:0.5,
        // side: THREE.FrontSide
    });
    const front_material7 = new THREE.MeshBasicMaterial({

        map: frontTexture7,
        // alphaMap: frontTexture1,
        // 设置透明属性
        transparent: true
        // opacity:0.5,
        // side: THREE.FrontSide
    });




    // 球 第二个面
    const mesh_ball1 = new THREE.Mesh(ball1, front_material1);
    mesh_ball1.position.set(30, 7.5, 0);
    // 第三个面
    const mesh_ball2 = new THREE.Mesh(ball1, front_material2);
    mesh_ball2.position.set(-30, 7.5, 0);
    // 第四个面
    const mesh_ball3 = new THREE.Mesh(ball1, front_material3);
    mesh_ball3.position.set(0, 0, 30);

    const mesh_ball4 = new THREE.Mesh(ball1, front_material4);
    mesh_ball4.position.set(15, 3.75, 15);

    const mesh_ball5 = new THREE.Mesh(ball1, front_material5);
    mesh_ball5.position.set(-15, 3.75, 15);

    const mesh_ball6 = new THREE.Mesh(ball1, front_material6);
    mesh_ball6.position.set(-15, 11.25, -15);

    const mesh_ball7 = new THREE.Mesh(ball1, front_material7);
    mesh_ball7.position.set(15, 11.25, -15);


    // const mesh_ball1 = new THREE.Mesh(ball1, front_material1);

    // mesh_ball1.position.set(15, 0, 0);
    scene.add(mesh_ball);
    scene.add(mesh_ball1);

    scene.add(mesh_ball2);

    scene.add(mesh_ball3);

    scene.add(mesh_ball4);
    scene.add(mesh_ball5);
    scene.add(mesh_ball6);
    scene.add(mesh_ball7);

    // scene.add(mesh_ball4);


    // render();





    let onWindowResize = () => {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        render.setSize(window.innerWidth, window.innerHeight);

    }

    let ballXFlag = 0
    let ballZFlag = 0
    let ballXFlag1 = 0
    let ballZFlag1 = 1
    let ballXFlag2 = 1
    let ballZFlag2 = 0
    let ballXFlag3 = 1
    let ballZFlag3 = 1
    let ballXFlag4 = 1
    let ballZFlag4 = 1
    let ballXFlag5 = 1
    let ballZFlag5 = 0
    let ballXFlag6 = 0
    let ballZFlag6 = 0
    let ballXFlag7 = 0
    let ballZFlag7 = 1
    let xNum = 0.1
    let flags = 1

    let render1 = () => {
        renderer.render(scene, camera);
    }
    let render = () => {
        // console.log(flags)
        if (flags != 5) {
            // mesh_ball.rotation.z+=0.1
            // position 位置 rotation 自传
            // console.log(mesh_ball.position.z)//0 x=30  z=0   x=0 z=-30
            //    第一个  球
            if (Math.floor(mesh_ball.position.x) === 30) {
                ballXFlag = 0
            }
            if (Math.floor(mesh_ball.position.x) === -30) {
                ballXFlag = 1
            }

            if (Math.floor(mesh_ball.position.z) === -30) {
                ballZFlag = 0
            }
            if (Math.floor(mesh_ball.position.z) === 30) {
                ballZFlag = 1
            }
            // console.log(Math.floor(mesh_ball.position.y))
            if (ballZFlag) {
                mesh_ball.position.z -= xNum
                mesh_ball.position.y += 0.025
            } else {
                mesh_ball.position.z += xNum
                mesh_ball.position.y -= 0.025

            }
            if (ballXFlag) {
                mesh_ball.position.x += xNum
            } else {
                mesh_ball.position.x -= xNum
            }

            // // 第二个球
            if (Math.floor(mesh_ball2.position.x) === 30) {
                ballXFlag2 = 0
            }
            if (Math.floor(mesh_ball2.position.x) === -30) {
                ballXFlag2 = 1
            }

            if (Math.floor(mesh_ball2.position.z) === -30) {
                ballZFlag2 = 0
            }
            if (Math.floor(mesh_ball2.position.z) === 30) {
                ballZFlag2 = 1
            }

            if (ballZFlag2) {
                mesh_ball2.position.z -= xNum
                mesh_ball2.position.y += 0.025
            } else {
                mesh_ball2.position.z += xNum
                mesh_ball2.position.y -= 0.025

            }
            if (ballXFlag2) {
                mesh_ball2.position.x += xNum
            } else {
                mesh_ball2.position.x -= xNum
            }


            // 第三个球
            if (Math.floor(mesh_ball1.position.x) === 30) {
                ballXFlag1 = 0
            }
            if (Math.floor(mesh_ball1.position.x) === -30) {
                ballXFlag1 = 1
            }

            if (Math.floor(mesh_ball1.position.z) === -30) {
                ballZFlag1 = 0
            }
            if (Math.floor(mesh_ball1.position.z) === 30) {
                ballZFlag1 = 1
            }

            if (ballZFlag1) {
                mesh_ball1.position.z -= xNum
                mesh_ball1.position.y += 0.025
            } else {
                mesh_ball1.position.z += xNum
                mesh_ball1.position.y -= 0.025

            }
            if (ballXFlag1) {
                mesh_ball1.position.x += xNum
            } else {
                mesh_ball1.position.x -= xNum
            }



            // 第4个球
            if (Math.floor(mesh_ball3.position.x) === 30) {
                ballXFlag3 = 0
            }
            if (Math.floor(mesh_ball3.position.x) === -30) {
                ballXFlag3 = 1
            }

            if (Math.floor(mesh_ball3.position.z) === -30) {
                ballZFlag3 = 0
            }
            if (Math.floor(mesh_ball3.position.z) === 30) {
                ballZFlag3 = 1
            }
            // console.log(Math.floor(mesh_ball.position.y))
            if (ballZFlag3) {
                mesh_ball3.position.z -= xNum
                mesh_ball3.position.y += 0.025
            } else {
                mesh_ball3.position.z += xNum
                mesh_ball3.position.y -= 0.025

            }
            if (ballXFlag3) {
                mesh_ball3.position.x += xNum
            } else {
                mesh_ball3.position.x -= xNum
            }


            // 第5个球
            if (Math.floor(mesh_ball4.position.x) === 30) {
                ballXFlag4 = 0
            }
            if (Math.floor(mesh_ball4.position.x) === -30) {
                ballXFlag4 = 1
            }

            if (Math.floor(mesh_ball4.position.z) === -30) {
                ballZFlag4 = 0
            }
            if (Math.floor(mesh_ball4.position.z) === 30) {
                ballZFlag4 = 1
            }
            // console.log(Math.floor(mesh_ball.position.y))
            if (ballZFlag4) {
                mesh_ball4.position.z -= xNum
                mesh_ball4.position.y += 0.025
            } else {
                mesh_ball4.position.z += xNum
                mesh_ball4.position.y -= 0.025

            }
            if (ballXFlag4) {
                mesh_ball4.position.x += xNum
            } else {
                mesh_ball4.position.x -= xNum
            }


            // 第6个球
            if (Math.floor(mesh_ball5.position.x) === 30) {
                ballXFlag5 = 0
            }
            if (Math.floor(mesh_ball5.position.x) === -30) {
                ballXFlag5 = 1
            }

            if (Math.floor(mesh_ball5.position.z) === -30) {
                ballZFlag5 = 0
            }
            if (Math.floor(mesh_ball5.position.z) === 30) {
                ballZFlag5 = 1
            }
            // console.log(Math.floor(mesh_ball.position.y))
            if (ballZFlag5) {
                mesh_ball5.position.z -= xNum
                mesh_ball5.position.y += 0.025
            } else {
                mesh_ball5.position.z += xNum
                mesh_ball5.position.y -= 0.025

            }
            if (ballXFlag5) {
                mesh_ball5.position.x += xNum
            } else {
                mesh_ball5.position.x -= xNum
            }


            // 第7个球
            if (Math.floor(mesh_ball6.position.x) === 30) {
                ballXFlag6 = 0
            }
            if (Math.floor(mesh_ball6.position.x) === -30) {
                ballXFlag6 = 1
            }

            if (Math.floor(mesh_ball6.position.z) === -30) {
                ballZFlag6 = 0
            }
            if (Math.floor(mesh_ball6.position.z) === 30) {
                ballZFlag6 = 1
            }
            // console.log(Math.floor(mesh_ball.position.y))
            if (ballZFlag6) {
                mesh_ball6.position.z -= xNum
                mesh_ball6.position.y += 0.025
            } else {
                mesh_ball6.position.z += xNum
                mesh_ball6.position.y -= 0.025

            }
            if (ballXFlag6) {
                mesh_ball6.position.x += xNum
            } else {
                mesh_ball6.position.x -= xNum
            }


            // 第8个球
            if (Math.floor(mesh_ball7.position.x) === 30) {
                ballXFlag7 = 0
            }
            if (Math.floor(mesh_ball7.position.x) === -30) {
                ballXFlag7 = 1
            }

            if (Math.floor(mesh_ball7.position.z) === -30) {
                ballZFlag7 = 0
            }
            if (Math.floor(mesh_ball7.position.z) === 30) {
                ballZFlag7 = 1
            }
            // console.log(Math.floor(mesh_ball.position.y))
            if (ballZFlag7) {
                mesh_ball7.position.z -= xNum
                mesh_ball7.position.y += 0.025
            } else {
                mesh_ball7.position.z += xNum
                mesh_ball7.position.y -= 0.025

            }
            if (ballXFlag7) {
                mesh_ball7.position.x += xNum
            } else {
                mesh_ball7.position.x -= xNum
            }


            // mesh_ball.position.x+=0.1
            requestAnimationFrame(render)
        }
        renderer.render(scene, camera); //执行渲染操作
    }

    let buildHelper = () => {

        // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
        axesHelper = new THREE.AxesHelper(250);
        scene.add(axesHelper);

    }


    const controls = new DragControls([mesh_ball, mesh_ball1, mesh_ball2, mesh_ball3, mesh_ball4, mesh_ball5, mesh_ball6, mesh_ball7], camera, renderer.domElement);

    // add event listener to highlight dragged objects

    // controls.addEventListener('dragstart', function (event) {
    //     console.log("开始")
    //     // event.object.material.emissive.set(0xaaaaaa);

    // });

    // controls.addEventListener('dragend', function (event) {
    //     console.log("结束")
    //     // event.object.material.emissive.set(0x000000);

    // });

    // hoveron
    controls.addEventListener('hoveron', function (event) {
        // console.log(event.object.material.map.source.data.currentSrc)
        let flagArr = event.object.material.map.source.data.currentSrc.split("/")
        let caseWhere = flagArr[flagArr.length - 1]
        // console.log(caseWhere)
        // event.object.material.map.source.data.currentSrc = event.object.material.map.source.data.currentSrc.replace(".","_c.")
        // console.log(frontTexture_c,frontTexture1_c,frontTexture2_c,frontTexture3_c,frontTexture4_c,frontTexture5_c,frontTexture6_c,frontTexture7_c)
        // 每个材质 都有一个 唯一的uuid 需要替换成选中状态
        // event.object.material.map = event.object.material.map.uuid=="073a76d1-5ceb-4d1b-8198-a48b4a4ae8b5"?
        // if (event.object.material.map.uuid === '073a76d1-5ceb-4d1b-8198-a48b4a4ae8b5') {
        //     event.object.material.map = frontTexture_c
        // }

        switch (caseWhere) {
            case "1.png":
                event.object.material.map = frontTexture_c// 当表达式的结果等于 value1 时，则执行该代码
                break;
            case "2.png":
                event.object.material.map = frontTexture1_c  // 当表达式的结果等于 value2 时，则执行该代码
                break;

            case "3.png":
                event.object.material.map = frontTexture2_c // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "4.png":
                event.object.material.map = frontTexture3_c  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "5.png":
                event.object.material.map = frontTexture4_c  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "6.png":
                event.object.material.map = frontTexture5_c  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "7.png":
                event.object.material.map = frontTexture6_c  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "8.png":
                event.object.material.map = frontTexture7_c  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            default:
                event.object.material.map = frontTexture1_c // 如果没有与表达式相同的值，则执行该代码
        }
        // event.object.material.map = frontTexture_c
        // event.object(ball1, front_material1)
        // console.log("鼠标上来了结束")
        // render(5)
        flags = 5
        // event.object.material.emissive.set(0x000000);

    });

    controls.addEventListener('hoveroff', function (event) {
        // console.log("鼠标离开")
        let flagArr = event.object.material.map.source.data.currentSrc.split("/")
        let caseWhere = flagArr[flagArr.length - 1]
        switch (caseWhere) {
            case "1_c.png":
                event.object.material.map = frontTexture// 当表达式的结果等于 value1 时，则执行该代码
                break;
            case "2_c.png":
                event.object.material.map = frontTexture1  // 当表达式的结果等于 value2 时，则执行该代码
                break;

            case "3_c.png":
                event.object.material.map = frontTexture2 // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "4_c.png":
                event.object.material.map = frontTexture3  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "5_c.png":
                event.object.material.map = frontTexture4  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "6_c.png":
                event.object.material.map = frontTexture5  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "7_c.png":
                event.object.material.map = frontTexture6  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            case "8_c.png":
                event.object.material.map = frontTexture7  // 当表达式的结果等于 valueN 时，则执行该代码
                break;
            default:
                event.object.material.map = frontTexture // 如果没有与表达式相同的值，则执行该代码
        }
       
        flags = 1
        render()


    });

   

    // buildHelper();

    render();
    window.addEventListener('resize', onWindowResize);
})


function xr() {
    init();

    buildHelper();

    render();
}

</script>